<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
        }
        .box1
        {
            width: 800px;
            height: 800px;
            background-color: silver;
            overflow: hidden;
        }
        .box1 div
        {
            width: 100px;
            height: 100px;
            margin-bottom: 100px;
            margin-left: 0;
        }
        .box2
        {
            /*margin-left: 700px;*/
            background-color: #bfa;
            /*transition: all 2s;*/
            /*
            过渡（transition)
            通过过渡可以指定一个属性发生变化时的切换方式
            通过过渡可以创建一些非常好的效果，提升用户的体验
            */
            
            /*
            transition-property指定要执行过渡的属性
            多个属性间使用,隔开
            如果所有属性都需要过滤，则使用all关键字
            大部分属性都支持过渡效果（宽度颜色高度这种可以计算的值)
            注意：过渡时必须是从一个有效数值向另外一个有效数值进行过渡（auto不是一个有效数值）
            */
            /*transition-property: all;*/

            /*
            transition-duration指定过渡效果的持续时间
            时间单位 s和ms 1s=1000ms
            也可以分别给值指定持续时间
            */
            /*transition-duration: 2s;*/

            /*
            transition-timing-function过渡的时序函数
            指定过渡的执行的方式
            可选值：
            默认值：
            ease 默认值，慢速开始，先加速，再减速
            linear 匀速运动
            ease-in 加速运动
            ease-out 减速运动
            ease-in-out 先加速后减速
            
            cubic-bezier()来指定时序函数
            https://cubic-bezier.com 函数网站，可以直接使用

            steps()分步执行过渡效果
            第一个值是执行的步骤数，第二个值默认是end
            end，在时间结束时执行过渡
            start，在时间开始时执行过渡
            */
            /*transition-timing-function:steps(2,end);*/

            /*
            transition-deplay过渡效果的延迟,等待一段时间后，再执行过渡
            */
            /*transition-delay: 2s;*/

            /*
            transition可以同时设置过渡相关的所有属性
            只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟
            */
            transition: margin-left,2s,1s,cubic-bezier(.17,.67,.83,.33);
        }

        .box3
        {
            background-color: orange;
            transition-property: all;
            transition-duration: 2s;
        }
            
        .box1:hover div
        {
            /*
            width: 200px;
            height: 200px;
            */
            /*background-color: blue;*/
            /*margin-left: 100px;*/
            margin-left: 700px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
</html>